<template>
  <h2>根组件</h2>
  <!-- reactive函数的用法-->
  <p>名字：{{ user.name }}</p>
  <p>年龄：{{ user.age }}</p>
  <!-- ref函数的用法 -->
  <p>品牌：{{ car.pinpai }}</p>
  <p>颜色：{{ car.color }}</p>
</template>

<script setup>
import { reactive, ref } from 'vue'
// 定义响应式对象或数组
const user = reactive({
	name: '张三',
	age: 20
})
// 定义响应式对象的时候，不能保护其结构不变
const car = ref({
	color: '黑色',
	pinpai: '奔驰'
})
setTimeout(() => {
	// user = {} // 不能重新赋值，不能修改基本的属性结构
	user.age = 21
	// car.value = 0 // 修改了对象的内部结构，变成了一个数字
	car.value.color = '白色'
}, 3000)
</script>

<style scoped>

</style>
